#27 No-code 之旅 — 客製化 Favicon ～ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 27

Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 27 篇

#27 No-code 之旅 — 客製化 Favicon ～

13th鐵人賽 react nextjs javascript

Jade

2021-10-12 23:52:53

1366 瀏覽

分享至

嗨嗨！今天來講一下怎麼設定網站的 favicon！還有用 Next.js 也可以快速設定每個頁面用不一樣的 favicon 喔！還不知道什麼是 favicon 的大家，可以看看瀏覽器的 tab，不是會看到網站的 title 之外，還有一個小小的圖，那就是 favicon ～

Favicon

Favicon 的圖最多是用 .ico 檔，不過其實也支援 .png 和 .svg 檔案喔～想要用 .ico 的話，通常是提供這三個大小 16x16, 32x32, and 48x48 pixels。如果決定用 .png 檔要注意的是 IE11 之前不支援 (不過現在應該不會遇到這問題了ＸＤ)。最後是 .svg，好處就是向量圖，所以檔案會比較小可是圖又可以被放大～不過瀏覽器支援度不高 (目前只有 Chrome, Firefox, Opera)！

那現在要怎麼在 Next.js 設定 favicon 呢？其實跟一般 HTML 一樣，放 <link> 在 <head> 裡，不過在 Next.js 就改用 <Head> component：

import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Head>
        <title>No-code by Jade</title>
        <link
          key="icon"
          rel="icon"
          href="https://source.boringavatars.com/beam/32/Home?colors=AFC7B9,FFE1C9,FAC7B4,FCA89D,998B82"
        />
      </Head>
      <Component {...pageProps} />
    </div>
  );
}
export default MyApp;

我選擇放在 pages/_app.js 裡的 <Head> 而不是在每一頁的檔案設定，是因為想要共用一個 favicon 圖就好。可是如果想要每一頁不一樣，那 pages/_app.js 裡的還是可以放著，只是在其他 pages 多加 <link> 還有記得加 key="icon" 在每一個 <link> 就行了！因為 Next.js 會自動只渲染最後的 <link>～所以可以像下面這些圖，每一頁用不同的 favicon 圖喔。

首頁的
Home